<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const toLink = (path) => {
  router.push(path)
}

</script>

<template>
  <div class="hl">
    <div class="hl-bg">
      <div class="common-title">首页</div>
      <div class="hl-list">
        <div class="hl-item" @click="toLink('/supervisor')">监理单位</div>
        <div class="hl-item" @click="toLink('/construction')">施工单位</div>
        <div class="hl-item" @click="toLink('/worker')">劳务人员</div>
      </div>
    </div>
  </div>
</template>



<style scoped>
.hl {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hl-bg {
  margin: 0 27px 0 27px;
  background: url("../assets/bg-unit.png") no-repeat;
  background-size: 100% 100%;
  height: 334px;
}
.hl-list {
  display: flex;
  justify-content: space-around;
  margin-top: 90px;
}
.hl-item {
  cursor: pointer;
  border-radius: 5px;
  height: 60px;
  display: block;
  padding: 0 30px;
  background: linear-gradient(135deg,#52bbff,#0085ff);
  color: #fff;
  line-height: 60px;
  font-size: 24px;
  text-align: center;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
</style>